<template>
  <div class="login">
    <div class="logo">
      <img class="logo_img" src="../../img/weixin.jpg"/>
    </div>
    <button v-if="canIUseGetUserProfile" class="login-btn" @tap="bindGetUserProfile">微信登录</button>
    <button v-else class="login-btn" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">微信登录</button>
  </div>
</template>

<script>

  import {getOpenid} from "../../utils";

  export default {
    data() {
      return {
        canIUseGetUserProfile: false,
      }
    },
    components: {},
    computed: {},
    created() {
    },
    mounted() {
      if (wx.getUserProfile) {
        this.canIUseGetUserProfile = true;
      }
    },
    methods: {

      bindGetUserProfile(e) {
        // 新增版本微信用户信息的方法，getuserinfo已废弃
        wx.getUserProfile({
          desc: '用户登录',
          success: res => {
            console.log(res);
            getOpenid();
            wx.setStorageSync("userInfo", res.userInfo);
            wx.navigateBack({});
          },
          fail: error => {
            // 用户按了拒绝按钮
            wx.showModal({
              title: '警告',
              content: '您点击了拒绝授权，请授权之后再登录!',
              showCancel: false,
              confirmText: '返回授权',
              success: function (res) {
                if (res.confirm) {
                }
              }
            })
          }
        })
      },

      bindGetUserInfo(e) {
        if (e.mp.detail.userInfo) {
          // 用户按了允许授权按钮
          console.log(e);
          getOpenid();
          wx.setStorageSync("userInfo", e.mp.detail.userInfo);
          wx.navigateBack({});
        } else {
          // 用户按了拒绝按钮
          wx.showModal({
            title: '警告',
            content: '您点击了拒绝授权，请授权之后再登录!',
            showCancel: false,
            confirmText: '返回授权',
            success: function (res) {
              if (res.confirm) {
              }
            }
          })
        }
      },

    }
  }

</script>

<style lang='scss' scoped>
  @import "./style.scss";
</style>

